<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="VUEJS/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p v-show="age>=18">成年</p>
			<p v-show="age<18">未成年</p>
			
			<p v-if="age>=18">成年</p>
			<p v-if="age<18">未成年</p>
			
			<hr />
			<p v-if="salary<=10">普通阶层</p>
			<p v-else-if="salary<=500">中产阶层</p>
			<p v-else="salary>500">富豪阶层</p>
			
			<hr /><!--类似Java中foreach循环-->
			<p v-for="o in hobby">{{o}}</p>
			<p v-for="o,i in hobby">{{i}}-{{o}}</p>
			
			<hr />
			<button v-on:click="show">点我</button>
			<button v-on:click="show()">点我</button>
			<button @click="show()">点我</button>
			<hr />
			<a href="{{site.url}}">{{site.name}}</a>
			<a href="site.url">{{site.name}}</a> 
			<a :href="site.url">{{site.name}}</a>
			<hr />
			<p v-text="sysname"></p>
			<p v-html="sysname"></p>
		</div>
	</body>
	<script>
		new Vue({
			el:"#app",
			data:{
				age:16,
				salary:600,
				hobby:["爬山","唱歌","喝酒"],
				sysname:"<b>仅仅</b>电商平台",
				site:{
					name:"百度中国",
					url:"http://www.baidu.com"
				}
			},
			
			methods:{
				show:function(){
					console.log("show method");
				}
			}
		});
		
	</script>
</html>
